<!--平台信息列表-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="标题" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入搜索关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发布时间">
        <date-range-picker :multiple="true" v-model="queryParams" value-format="timestamp" content-style="width: 240px" startPickerName="startTime" endPickerName="endTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-radio-group v-model="activeType" style="margin-bottom: 30px;" @input="changeList">
      <el-radio-button label="0" class="radio-button-width">公告</el-radio-button>
      <el-radio-button label="1" class="radio-button-width">推送</el-radio-button>
    </el-radio-group>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="$router.push({path:'/content/postMessage',query:{type:'0'}})"
          v-hasPermi="['car:package:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="list" :height="maxTableHeight">
      <el-table-column label="标题(中)" align="center" prop="chineseTitle" width="300" :show-overflow-tooltip="true"/>
      <!-- <el-table-column label="内容摘要(中)" align="left" prop="chineseContent" width="300" :show-overflow-tooltip="true">
         <template slot-scope="scope">
          <span v-html="scope.row.chineseContent"></span>
        </template>
      </el-table-column> -->
      <el-table-column label="标题(英文)" align="center" prop="englishTitle" width="300" :show-overflow-tooltip="true"/>
      <!-- <el-table-column label="内容摘要(英文)" align="left" prop="englishContent" width="300" :show-overflow-tooltip="true">
         <template slot-scope="scope">
          <span v-html="scope.row.englishContent"></span>
        </template>
      </el-table-column> -->
      <el-table-column label="发布人" align="center" prop="createBy" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="发布时间" align="center" prop="createTime" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime,'{m}/{d}/{y}') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="$router.push({path:'/content/postMessage',query:{type:'1',id:scope.row.id}})"
              v-hasPermi="['car:package:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row,'0')"
              v-hasPermi="['car:package:remove']"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- <el-row class="table-title">平台长期信息</el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="$router.push({path:'/content/postMessage',query:{type:'1'}})"
          v-hasPermi="['car:package:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loadingLang" :data="listLang" :height="maxTableHeight">
      <el-table-column label="标题" align="center" prop="title" width="300" :show-overflow-tooltip="true"/>
      <el-table-column label="内容摘要" align="content" prop="skuOrderId" width="700" :show-overflow-tooltip="true"/>
      <el-table-column label="发布人" align="center" prop="createBy" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="发布时间" align="center" prop="createTime" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime,'{m}/{d}/{y}') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <div>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="$router.push({path:'/content/postMessage',query:{type:'1',id:scope.row.id}})"
              v-hasPermi="['car:package:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row,'1')"
              v-hasPermi="['car:package:remove']"
            >删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalLang>0"
      :total="totalLang"
      :page.sync="queryParamsLang.pageNum"
      :limit.sync="queryParamsLang.pageSize"
      @pagination="getListLang"
    /> -->
  </div>
</template>
<script>

import {
  delMessage,
  message
} from '@/api/content/messageList'
import CountTo from 'vue-count-to'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import Template from '@/views/setting/template/index.vue'
import { delPackage, getPackage, listPackage } from '@/api/store/flowManage'

export default {
  name: 'messageList',
  components: { Template, DateRangePicker, CountTo },
  data() {
    return {
      maxTableHeight:'',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        typeInfo:'0',
        type:0
      },
      total:0,
      totalLang:0,
      queryParamsLang: {
        pageNum: 1,
        pageSize: 10,
        typeInfo:'0',
        type:1,
        title:'',
      },
      loading:false,
      list:[],
      loadingLang:false,
      listLang:[],
      activeType:0,
    }

  },
  created() {
    this.calcTableHeight();
    this.getList();
    this.getListLang();
  },
  methods: {
    //计算页面单个table高度
    calcTableHeight() {
      window.bodyHeight = document.documentElement.clienHeight || document.body.clientHeight;
      this.maxTableHeight = (window.bodyHeight - 300) / 3;
    },
    changeList(value){
      console.log(this.activeType)
      this.queryParams.typeInfo = value;
      this.queryParamsLang.typeInfo = value;
      this.getList();
      this.getListLang();
    },
    // todo 筛选条件是否共用
    getList(){
      this.loading = true;
      message(this.queryParams).then(response => {
        this.list = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    getListLang(){
      this.loadingLang = true;
      message(this.queryParamsLang).then(response => {
        this.listLang = response.data.records;
        this.totalLang = response.data.total;
        this.loadingLang = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParamsLang.endTime = this.queryParams.endTime
      this.queryParamsLang.startTime = this.queryParams.startTime
      this.queryParamsLang.title = this.queryParams.title
      this.getList()
      this.getListLang()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs.queryForm.resetFields()
      this.queryParams = {
        pageNum: 1,
          pageSize: 10,
          typeInfo:'0',
          type:0
      }
      this.queryParamsLang = {
        pageNum: 1,
        pageSize: 10,
        typeInfo:'0',
        type:1
      }
      this.handleQuery()
    },

    /** 删除按钮操作 */
    handleDelete(row,type) {
      this.$modal.confirm('是否确认删除流量包编号为"' + row.id + '"的数据项？').then(function() {
        return delMessage(row.id );
      }).then(() => {
        if(type==0){
          this.getList();
        }else {
          this.getListLang();
        }
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },

  }
}
</script>
<style scope lang="scss">
.radio-button-width .el-radio-button__inner{
  width:200px;
}
.table-title {
  padding: 20px 0 10px 0;
}
</style>
